<template>
  <div class="login-box">
<!--    <div class="login-page-title">管理系统</div>-->

    <div class="login-form">
      <div class="login-text">登陆</div>
      <el-form :model="userinfo" :rules="rules" ref="loginUserinfo" class="from-container">
        <el-form-item label="用户名" prop="username">
          <el-input id="username" class="login_content" type="text" v-model="userinfo.username" autocomplete="on"
                    placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input id="password" class="login_content" type="password" v-model="userinfo.password"
                    autocomplete="off"
                    placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="login_submit" @click="login('loginUserinfo')">登陆</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import {Message} from 'element-ui'
import {login} from "@/api/user";
import {setToken} from "@/utils/auth";

export default {
  name: "Login",
  data() {
    return {
      userinfo: {
        username: "",
        password: ""
      },
      rules: {
        username: [{required: true, message: "用户名不能为空"}],
        password: [{required: true, message: "密码不能为空"}]
      },
    }
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate((valid) => {
        //进入主页
        // this.$router.push({path: "/"})
        if (valid) {
          login(this.userinfo.username, this.userinfo.password).then(response => {
            //保存用户信息
            setToken(response.data.token)
            //提示
            this.$message({
              message: response.message,
              type: "success",
              duration: 3 * 1000
            })
            //进入主页
            this.$router.push({path: "/home"})
          });

        } else {
          Message({
            message: "验证失败",
            type: 'error',
            duration: 3 * 1000
          })
          return false;
        }
      });
    },
    handleClose() {

    },
  }
}

</script>

<style scoped>

.login-box {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3)), url("../assets/login_background.jpeg");
  background-size: 100% 100%;
  position: fixed; /*固定定位*/
}

.login-form {
  position: absolute;
  top: 100px;
  right: 250px;
  width: 400px;
  height: 500px;

  background-color: #f0f8ffb8;
  border-radius: 8px;
}

.login-text {
  margin-left: 20px;
  margin-top: 20px;
  font-size: 35px;
  font-weight: 600;
  color: rgba(64, 158, 255, 0.99);
}

.from-container {

  margin: 0 auto;
  padding-top: 40px;
  width: 300px;

}

.login_content {
  font-size: 16px;
}

/deep/ .el-input__inner {
  height: 50px;
}

.login_submit {
  position: relative;
  width: 150px;
  left: 50%;
  margin-left: -75px;
  margin-top: 20px;
}

.dialog-msg {
  text-align: center;
  font-size: 20px;
}

.login-page-title {
  position: relative;
  font-size: 50px;
  top: 250px;
  left: 330px;
  color: #e7e2e2;
  font-weight: 1200;
}
</style>
